<template>
  <div>
    <div v-if="groupList.length" class="container-box">
      <h3 class="title">現有子帳戶</h3>
      <user-list v-for="(item, i) in groupList" :key="item.groupId" :groupId="item.groupId"></user-list>
    </div>
    <el-empty v-else description="暫無數據"></el-empty>
    <el-row justify="end" type="flex" class="text-right">
      <el-col :xs="12" :sm="12" :md="6" :lg="3" :xl="2">
        <el-button type="primary" @click="drawer = true">添加子帳戶</el-button>
      </el-col>
    </el-row>
    <el-drawer
      title="添加子帳戶"
      :visible.sync="drawer"
      direction="btt"
      :wrapperClosable="false"
      ref="drawer"
      >
      <el-row :gutter="10" justify="end" type="flex" class="text-right">
        <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="text-right">
            <el-autocomplete
              class="inline-input"
              v-model="form.groupName"
              :fetch-suggestions="querySearch"
              placeholder="請選擇群組"
              @select="handleSelect"
              readonly
            >
              <template slot="prepend">群組</template>
            </el-autocomplete>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input placeholder="請輸入私鑰" type="text" v-model="form.privateKey">
            <template slot="prepend">私鑰</template>
          </el-input>
        </el-col>
        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
          <el-button type="primary" @click="onAddAssets">確定</el-button>
          </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import { timestampToTime } from '@/utils/tools'
import UserList from './components/user-list'

export default {
  name: 'account-index',

  components: {
    [UserList.name]: UserList
  },

  data() {
    return {
      groupList: [],
      state1: '',
      ruleForm: {
        parentId: ''
      },
      loading: false,
      drawer: false,

      form: {
        privateKey: '',
        groupId: '',
        groupName: ''
      },
    }
  },

  created() {
    let user = sessionStorage.getItem('user')
    if (user) {
      user = JSON.parse(user)
      this.ruleForm.parentId = user.id || ''
    }
  },

  mounted() {
    this.getGroupData()
  },

  methods: {
    //添加子账号-确认按钮
    onAddAssets() {
      this.loading = true
      this.$store.dispatch('account/fetchAddChildAccount', { ...this.form }).then(res => {
        // console.log('添加子账号')
        // console.log(res)
        this.loading = false
        this.$message.success(res.message)
        this.form = {
          privateKey: '',
          groupId: '',
          groupName: ''
        }
        //关闭抽屉
        this.drawer = false
        this.$refs.drawer.closeDrawer()
        this.groupList = []
        this.getGroupData()
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    //获取群组列表
    getGroupData() {
      this.loading = true
      this.$store.dispatch('account/fetchListGroup', this.ruleForm).then(res => {
        // console.log('获取群组列表')
        // console.log(res)
        this.groupList = res.result.gpsGroupList
        if(this.groupList.length) {
          this.groupList.forEach(function(item) {
            item.time = window.Tools.timestampToTime(item.createTime)
            item.value = item.groupName
          })
        }
        this.loading = false
        // this.$message.success(res.message)
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    querySearch(queryString, cb) {
      var groupList = this.groupList
      var results = queryString ? groupList.filter(this.createFilter(queryString)) : groupList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },

    createFilter(queryString) {
      return (groupList) => {
        return (groupList.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },

    handleSelect(item) {//下拉选择的值
      this.form.groupId = item.groupId
    },
  }
}
</script>

<style scoped lang="scss">
@import "../../assets/css/them.scss";

.container-box {
  padding: 10px 20px;
}

.text-right {
  text-align: right;
  padding: 0 20px;
}
</style>
